import React from 'react';
import { TabBar } from 'antd-mobile';
import { AppOutline, AddCircleOutline, UserOutline } from 'antd-mobile-icons';
import { useNavigate, useLocation } from 'react-router-dom';

const Tab = () => {
    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />
        },
        {
            key: '/contact/contact/index',
            title: '新建',
            icon: <AddCircleOutline />
        },
        {
            key: '/user/base/index',
            title: '我的',
            icon: <UserOutline />
        }
    ]

    const [activeKey, setActiveKey] = React.useState('/')
    let navigate = useNavigate()
    let location = useLocation()

    React.useEffect(() => {
        if (location.pathname) {
            setActiveKey(location.pathname)
        }
    }, [activeKey])

    const changeActiveKey = (value) => {
        setActiveKey(value)
        navigate(value)
    }

    return (
        <>
            <div className='tabbar'>
                <TabBar activeKey={activeKey} onChange={changeActiveKey}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </>
    )
}

export default Tab;